body {
    background-color: #f7f7f8;
}

.main {
    margin-bottom: 80px;
    /* 底部定位 */
    position: relative;
}

.address {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.address .icon-location {
    width: 30px;
    height: 30px;
    font-size: 17px;
    background-color: #58b399;
    color: #fff;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    margin: 0 10px;
}

.user {
    height: 85px;
    /* 父盒子是address,剩余空间平分一份 */
    flex: 1;
    display: flex;
    /* 设置y轴对齐 */
    flex-direction: column;
    justify-content: center;
}

.user .mass {
    font-size: 15px;
    color: #262626;
}

.user a {
    font-size: 12px;
}

.address .icon-more {
    width: 44px;
    height: 44px;
    line-height: 44px;
}

.product {
    height: 107px;
    display: flex;
    /* 让产品区域上下有空隙 */
    align-items: center;
    /* 让主轴将两个盒子平分剩余空间，两侧有距离 */
    justify-content: space-around;
}

/* 直接给左侧盒子设置宽高 */
.left {
    width: 85px;
    height: 85px;
}

.right {
    width: 240px;
    /* 右侧设置主轴为y */
    display: flex;
    flex-direction: column;
}

.detail {
    font-size: 13px;
    display: flex;
}

.detail .num {
    align-self: center;
    font-size: 16px;
    text-align: center;
}

/* 产品外观 */
.face {
    width: 88px;
    font-size: 11px;
    margin: 3px 0;
    background-color: #f7f7f8;
    color: #888888;
}

/* 产品价格 */
.product_money span:nth-of-type(1) {
    font-size: 9px;
    color: #cf4444;
}

.product_money span:nth-of-type(2) {
    font-size: 16px;
    color: #cf4444;
}

/* 降价 */
.product_money a:nth-of-type(2) {
    font-size: 9px;
    color: #999999;
    text-decoration: line-through;
}

/* 支付盒子 */
.pay ul,
.price ul {
    /* 由于ul是li撑开的无法设置主轴属性，需要加高度 */
    display: flex;
    height: 125px;
    flex-direction: column;
    align-items: center;
    /* 主轴平分两侧空间 */
    justify-content: space-between;
}

.pay ul li,
.price ul li {
    width: 340px;
    height: 30px;
    display: flex;
    justify-content: space-between;
}

.pay li:nth-of-type(2) {
    display: flex;
    justify-content: flex-start;
}

/* 商家备注 */
.pay li:nth-of-type(2) .pay_right {
    margin-left: 10px;
    font-size: 12px;
    line-height: 30px;
    color: #989898;
}

/* 支付方式 */
.pay span {
    border: 0;
    background-color: #fff;
}

/* 价钱折扣 */
.price li:nth-of-type(3) .pay_right {
    color: #cf4444;
}

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 375px;
    height: 79px;
    display: flex;
    justify-content: space-between;
    line-height: 79px;
    background-color: #ffffff;
}

.footer .hj {
    font-size: 11px;
    color: #1e1e1e;
    margin-left: 10px;
}

.footer .jiage {
    font-size: 20px;
    color: #cf4444;
    margin-left: -155px;
}

.footer .jiage span {
    font-size: 11px;
}

button {
    width: 91px;
    height: 35px;
    color: #fff;
    border: 0;
    margin-right: 10px;
    border-radius: 3px;
    background-color: #58b399;
}